// 设备划分


//PC设备(默认大小)
.topNav {
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #ccc;
    .w {
        height: 100%;
        li {
            float: left;
            padding: 0 35px;
            border-right: 1px solid #ccc;
            &:last-child {
                border-right: 0;
                a:first-child {
                    background-color: red;
                    color: #fff;
                    padding: 5px;
                    border-radius: 5px;
                    margin-right: 10px;
                }
            }
        }
    }
}

//主体导航
.nav {
    width: 100%;
    height: 60px;
    line-height: 60px;

    li {
        float: left;
        padding: 0 20px;
        img {
            width: 139px;
        }
    }
}

//广告区域
.banner {
    width: 100%;

    img {
        width: 100%;
    }
}

// 列表区域
.lists {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;

    .w {
        display: flex;
        justify-content: space-between;
    }

    dt {
        font-size: 18px;
        font-weight: 700;
        color: #666;
        height: 30px;
    }

    dd {
        line-height: 30px;
    }
}


//文字区域
.text {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding: 10px  0;
    line-height: 25px;

    span {
        color: blue;

        //设置鼠标样式
        cursor: help;
    }
}


//底部区域
.footer {
    width: 100%;
    background: url('../images/box-style-bg.png');

    //顶部第一个盒子
    .topBox {
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;

        li {
            float: left;
            a {
                padding: 0 20px;
            }
        }
    }

    //第二个盒子
    .tips {
        position: relative;
        width: 100%;
        height: 55px;
        line-height: 55px;
        padding-left: 30px;
        background-color: #fff;
        box-sizing: border-box;
        margin-top: 30px;
        &::before {
            content: '';
            width: 0;
            height: 0;
            display: block;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid transparent;
            border-bottom: 10px solid #fff;
            position: absolute;
            left: 30px;
            top: -20px;
        }
    }

    //第三个盒子
    .cards {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item {
            width: 33%;
            height: 148px;
            background-color: #e61e25;
            margin-top: 10px;
            border-radius: 10px;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            .leftItem {
                flex: 1;
                height: 100%;
                border-right: 1px dashed #fff;
                position: relative;
                &::before {
                    content: '';
                    width: 15px;
                    height: 15px;
                    background-color: #f0f0f0;
                    display: block;
                    border-radius: 50%;
                    position: absolute;
                    right: -8px;
                    top: -17px;
                }

                &::after {
                    content: '';
                    width: 15px;
                    height: 15px;
                    background-color: #f0f0f0;
                    display: block;
                    border-radius: 50%;
                    position: absolute;
                    right: -8px;
                    bottom: -17px;
                }
            }
            .rightItem {
                width: 110px;
                height: 100%;
                text-align: center;
                color: #fff;
                h2 {
                    margin: 15px 0 10px;
                    font-size: 30px;
                }
            }

            //设置公共颜色
            .pub_color {
                color: #fff;
            }

            .spec {
                color: rgba(255, 255, 255, .3);
                font-size: 12px;
            } 

            p:nth-child(2n) {
                margin: 6px 0;
            }
        }
        &::after {
            content: '';
            width: 33%;
            display: block;
        }
    }
}


//ipad设备
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    //顶部导航
    .topNav {
        .w {
            width: 768px;
            li:first-child {
                display: none;
            }
        }
    }

    // 主体导航
    .nav {
        .w {
            width: 768px;
        }
        li {
            padding: 0 16px;
        }
        li:last-child {
            display: none;
        }
    }

    //列表区域
    .lists {
        .w {
            width: 768px;
            justify-content: space-around;
        }
    }

    //文字区域
    .text {
        .w {
            width: 768px;
        }

        p {
            padding: 0 15px;
            font-size: 14px;
        }
    }


    //底部区域
    .footer {

        .w {
            width: 768px;
        }


        // 第三个盒子
        .cards {

            .item {
                width: 49%;
            }
        }

    }
}


//移动设备
@media only screen and (min-width: 320px) and (max-width: 767px) { 
     //顶部导航
     .topNav {
         display: none;
     }
     //主体导航
     .nav {
         display: none;
     }

     //列表区域隐藏
     .lists {
         display: none;
     }

     //文字区域
     .text {
         .w {
             width: 100%;
         }
         p {
             padding: 0 15px;
             font-size: 14px;
             line-height: 20px;
         }
     }

     //底部区域
     .footer {
         .w {
             width: 100%;
         }
         //第一个盒子
         .topBox {
             //超出显示滚动条
             overflow: auto;
             ul {
                 width: 768px;
             }
         }

         //第三个盒子
         .cards {
            .item {
                width: 100%;
            }
         }
     }
}